<template>
  <div class="authorization-container">
    <!-- 可以显示一个加载指示器或简单的消息 -->
    <p v-if="loading" class="loading-message">Redirecting...</p>
    <p v-else-if="error" class="error-message">{{ errorMessage }}</p>
    <!-- 也可以在这里添加其他UI元素，比如一个按钮来重新尝试授权 -->
  </div>
</template>

<script>

export default {
  data() {
    return {
      loading: true,
      error: false,
      errorMessage: '',
    };
  },
  created() {
    const urlParams = new URLSearchParams(this.$route.query);
    const code = urlParams.get('code');

    if (code) {
      this.$request.get('/oauth2/login', { params: { code : code} })
        .then(res => {
          if (res.code === '200') {
            // 存储用户信息
            localStorage.setItem('xm-user', JSON.stringify(res.data));
            // 重定向到主页
            this.$router.push('/');
            this.$message.success('登录成功')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(error => {
          // 处理请求错误
          console.error('Error fetching user info:', error);
          this.error = true;
          this.errorMessage = 'Failed to log in. Please try again.';
        })
        .finally(() => {
          this.loading = false; // 确保加载状态在请求完成后被更新
        });
    } else {
      // 如果没有 code 参数，则显示错误
      this.error = true;
      this.errorMessage = 'No code parameter found. Please try again.';
    }
  },
};
</script>

<style scoped>
.authorization-container {
  text-align: center;
  margin-top: 50px; /* 添加顶部间距以提升视觉效果 */
  padding: 20px; /* 添加内边距以增强可读性 */
  background-color: #f9f9f9; /* 添加淡色背景以突出内容 */
  border-radius: 10px; /* 添加圆角以增加柔和感 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影以增强立体感 */
  max-width: 600px; /* 限制最大宽度以确保内容在不同屏幕上都能良好显示 */
  width: 100%; /* 确保在小屏幕上能占满可用空间 */
}

.loading-message,
.error-message {
  font-size: 16px; /* 设置字体大小 */
  color: #333333; /* 设置字体颜色 */
  margin: 0; /* 移除默认的外边距 */
}

.loading-message {
  /* 可以添加一些动画效果来表示正在加载，比如淡入淡出 */
  opacity: 0.8; /* 设置透明度 */
  transition: opacity 0.5s ease; /* 添加过渡效果 */
}

.error-message {
  color: #ff0000; /* 使用红色来表示错误 */
  font-weight: bold; /* 使用粗体来强调错误信息 */
}
</style>
